<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    width="1200px"
    append-to-body
    @close="closeDialog"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        :rules="rules"
        size="small"
        label-width="100px"
        label-position="right"
        :disabled="!!isDetail"
      >
        <el-col :span="24">
          <el-form-item label="评价分类" prop="categore">
            <el-select
              v-model="dataForm.categore"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              :multiple="false"
            >
              <el-option
                v-for="(item, index) in getDict('pingjiafenlei')"
                :key="index"
                :label="item.dataName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="评价内容" prop="content">
            <el-input
              type="textarea"
              v-model="dataForm.content"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="24">
          <el-form-item label="描述" prop="remark">
            <el-input
              v-model="dataForm.remark"
              type="textarea"
              placeholder="请输入"
              clearable
              :rows="3"
              :style="{ width: '100%' }"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-col> -->

        <el-col :span="24">
          <el-form-item label="评分方式" prop="method">
            <el-select
              v-model="dataForm.method"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              @change="changeMethod"
            >
              <el-option label="分值" value="1"></el-option>
              <el-option label="自定义评价" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="dataForm.method == 1">
          <el-form-item label="分值" prop="score">
            <el-input-number
              v-model="dataForm.score"
              :min="1"
              :step="1"
            ></el-input-number>
          </el-form-item>
        </el-col>

        <div class="part_card" v-if="dataForm.method == 2">
          <div class="part_card_header" style="width: 100px">评价选项</div>
          <div class="part_card_body">
            <el-row style="margin-bottom: 10px">
              <el-col :span="18" style="text-align: center">选项内容</el-col>
              <el-col :span="6" style="text-align: center">操作</el-col>
            </el-row>
            <el-row
              v-for="(item, index) in letterList.slice(0, option)"
              :key="index"
            >
              <el-col :span="18" style="text-align: center">
                <div class="part_card">
                  <div class="part_card_header">{{ item.index + 1 }}</div>
                  <div class="part_card_body">
                    <el-input
                      v-model="item.label"
                      placeholder="请输入内容"
                    ></el-input>
                  </div>
                </div>
              </el-col>
              <el-col :span="6" style="text-align: center; padding-top: 10px">
                <el-col :span="6">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    circle
                    @click="addOption(item)"
                  ></el-button
                ></el-col>
                <el-col :span="6">
                  <el-button
                    type="primary"
                    icon="el-icon-minus"
                    circle
                    @click="subtractOption(item)"
                  ></el-button
                ></el-col>
                <el-col :span="6">
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-up"
                    circle
                    @click="moveUp(item)"
                  ></el-button
                ></el-col>
                <el-col :span="6">
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-down"
                    circle
                    @click="moveDown(item)"
                  ></el-button
                ></el-col>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
export default {
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      isDetail: false,
      activeName: "",
      dataForm: {
        categore: "",
        managename: undefined,
        remark: undefined,
        creatoruserid: "",
        creatortime: "",
        lastmodifyuserid: "",
        lastmodifytime: "",
        method: undefined,
        score: "10",
        optionsum: [],
        content: undefined,
        organizeId:""
      },
      rules: {
        categore: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        managename: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
      option: 4, //默认展示4个选项
      letterList: [
        { label: "选项1", index: 0, value: "0" },
        { label: "选项2", index: 1, value: "0" },
        { label: "选项3", index: 2, value: "0" },
        { label: "选项4", index: 3, value: "0" },
        { label: "选项5", index: 4, value: "0" },
        { label: "选项6", index: 5, value: "0" },
        { label: "选项7", index: 6, value: "0" },
        { label: "选项8", index: 7, value: "0" },
        { label: "选项9", index: 8, value: "0" },
        { label: "选项10", index: 9, value: "0" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: `/api/xy_pj_manage/Xy_pj_manage/${this.dataForm.id}?organizeId=${this.$store.getters.organizeId}`,
            method: "get",
          }).then((res) => {
            this.dataForm = res.data;
            console.log(this.dataForm, "this.dataForm");
            this.dataForm.optionsum = this.dataForm.optionsum
              ? JSON.parse(res.data.optionsum)
              : [];
            this.option = this.dataForm.optionsum.length
              ? this.dataForm.optionsum.length
              : 4;
            this.dataForm.optionsum.forEach((item) => {
              this.letterList[item.index].label = item.label;
              this.letterList[item.index].value = item.value;
            });
            this.loading = false;
          });
        }
      });
    },
    //新增选项
    addOption(item) {
      if (this.option <= 9) {
        this.option++;
        for (let i = this.option; i > item.index; i--) {
          this.letterList[i].label = this.letterList[i - 1].label;
          //   this.letterList[i].id = this.letterList[i - 1].id;
        }
        this.letterList[item.index + 1].label = `选项${item.index + 2}`;
        // this.letterList[item.index + 1].id =
        //   this.letterList[item.index + 1].label;
      } else {
        this.$message({
          message: "最多只能添加10个选项",
          type: "warning",
          duration: 1000,
        });
      }
    },

    // 减少选项
    subtractOption(item) {
      if (this.option > 1) {
        this.option--;
        for (let i = item.index; i < this.letterList.length - 1; i++) {
          this.letterList[i].label = this.letterList[i + 1].label;
          // this.letterList[i].id = this.letterList[i + 1].id;
        }
      } else {
        this.$message({
          message: "最少保留一个选项",
          type: "warning",
          duration: 1000,
        });
      }
    },

    // 下移选项
    moveDown(item) {
      if (item.index < this.option - 1) {
        let temp = this.letterList[item.index].label;
        // let tempId = this.letterList[item.index].id;
        this.letterList[item.index].label =
          this.letterList[item.index + 1].label;
        // this.letterList[item.index].id = this.letterList[item.index + 1].id;
        this.letterList[item.index + 1].label = temp;
        // this.letterList[item.index + 1].id = tempId;
      } else {
        this.$message({
          message: "已经是最后一个选项",
          type: "warning",
          duration: 1000,
        });
      }
    },

    // 上移选项
    moveUp(item) {
      if (item.index > 0) {
        let temp = this.letterList[item.index].label;
        // let tempId = this.letterList[item.index].id;
        this.letterList[item.index].label =
          this.letterList[item.index - 1].label;
        // this.letterList[item.index].id = this.letterList[item.index - 1].id;
        this.letterList[item.index - 1].label = temp;
        // this.letterList[item.index - 1].id = tempId;
      } else {
        this.$message({
          message: "已经是第一个选项了",
          type: "warning",
          duration: 1000,
        });
      }
    },

    changeMethod(val) {
      console.log(this.letterList, this.letterList, 123);
    },

    closeDialog() {
      this.$refs["elForm"].resetFields();
      this.letterList = [
        { label: "选项1", index: 0, value: "0" },
        { label: "选项2", index: 1, value: "0" },
        { label: "选项3", index: 2, value: "0" },
        { label: "选项4", index: 3, value: "0" },
        { label: "选项5", index: 4, value: "0" },
        { label: "选项6", index: 5, value: "0" },
        { label: "选项7", index: 6, value: "0" },
        { label: "选项8", index: 7, value: "0" },
        { label: "选项9", index: 8, value: "0" },
        { label: "选项10", index: 9, value: "0" },
      ];
    },

    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.dataForm.organizeId = this.$store.getters.organizeId;

          if (this.dataForm.method == 1) {
            this.dataForm.optionsum = undefined;
          } else {
            this.dataForm.optionsum = JSON.stringify(
              this.letterList.splice(0, this.option)
            );
            this.dataForm.score = undefined;
          }
          if (!this.dataForm.id) {
            request({
              url: `/api/xy_pj_manage/Xy_pj_manage`,
              method: "post",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  (this.visible = false), this.$emit("refresh", true);
                },
              });
            });
          } else {
            request({
              url: "/api/xy_pj_manage/Xy_pj_manage/" + this.dataForm.id,
              method: "PUT",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                },
              });
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.part_card {
  margin-left: 20px;
  min-height: 50px;
  display: flex;
  margin-bottom: 20px;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  .part_card_header {
    -webkit-box-flex: 0;
    flex: none;
    width: 70px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    background-color: #f5f7fa;
    font-weight: 700;
    border-right: 1px solid #ccc;
  }
  .part_card_body {
    -webkit-box-flex: 1;
    flex: 1;
    padding: 10px;
    .myradio {
      padding-top: 20px;
      >>> .el-radio__label {
        display: none;
      }
      >>> .el-radio__inner {
        transform: scale(1.3);
      }
      >>> .el-checkbox__label {
        display: none;
      }
      >>> .el-checkbox__inner {
        transform: scale(1.3);
      }
    }
  }
}
</style>
